<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回收站 - 火星云盘系统</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <!-- 引用主页面样式 -->
    <link rel="stylesheet" th:href="@{/}" />
    
    <style>
        /* 复用index.html的样式 */
        @import url("/?type=all");
        
        .expire-info {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
        }
        
        .btn-group-recycle {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<!-- 顶部导航栏 -->
<div class="top-navbar">
    <div class="logo-section">
        <div class="logo-icon">
            <i class="bi bi-rocket-takeoff-fill"></i>
        </div>
        <span>火星云盘系统</span>
    </div>
    <div class="user-section">
        <div class="storage-info" id="storageInfo" onclick="refreshStorage()" title="点击刷新存储空间" style="cursor: pointer;">
            <i class="bi bi-hdd-fill me-1"></i>
            <span>存储空间：加载中...</span>
        </div>
        <div class="user-avatar" onclick="showUserMenu()" title="退出登录">
            <i class="bi bi-person-fill"></i>
        </div>
    </div>
</div>

<!-- 主容器 -->
<div class="main-wrapper">
    <!-- 左侧边栏 -->
    <div class="sidebar">
        <ul class="sidebar-menu">
            <li class="sidebar-item" onclick="window.location.href='/'">
                <i class="bi bi-folder-fill"></i>
                <span>全部文件</span>
            </li>
            <li class="sidebar-item" onclick="window.location.href='/?type=image'">
                <i class="bi bi-image-fill"></i>
                <span>图片</span>
            </li>
            <li class="sidebar-item" onclick="window.location.href='/?type=document'">
                <i class="bi bi-file-earmark-text-fill"></i>
                <span>文档</span>
            </li>
            <li class="sidebar-item" onclick="window.location.href='/?type=video'">
                <i class="bi bi-play-circle-fill"></i>
                <span>视频</span>
            </li>
            <li class="sidebar-item" onclick="window.location.href='/?type=audio'">
                <i class="bi bi-music-note-beamed"></i>
                <span>音频</span>
            </li>
            <li class="sidebar-item" onclick="window.location.href='/?type=recent'">
                <i class="bi bi-clock-history"></i>
                <span>最近使用</span>
            </li>
            <li class="sidebar-item active">
                <i class="bi bi-trash3-fill"></i>
                <span>回收站</span>
            </li>
        </ul>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 面包屑导航 -->
        <div class="breadcrumb-bar">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="/"><i class="bi bi-house-door-fill"></i> 全部文件</a>
                    </li>
                    <li class="breadcrumb-item active">回收站</li>
                </ol>
            </nav>
        </div>

        <!-- 工具栏 -->
        <div class="toolbar">
            <div class="toolbar-left">
                <button class="btn-toolbar btn-danger" onclick="emptyRecycleBin()" th:if="${files.size() > 0}">
                    <i class="bi bi-trash3"></i>
                    <span>清空回收站</span>
                </button>
                <button class="btn-toolbar" onclick="window.location.href='/'">
                    <i class="bi bi-arrow-left"></i>
                    <span>返回</span>
                </button>
            </div>
            <div class="toolbar-right">
                <span class="text-muted">文件将在30天后自动删除</span>
            </div>
        </div>

        <!-- 文件列表 -->
        <div class="file-list-container">
            <th:block th:if="${files.size() == 0}">
                <div class="empty-state">
                    <i class="bi bi-trash"></i>
                    <h4>回收站为空</h4>
                    <p>已删除的文件会保留30天</p>
                </div>
            </th:block>

            <th:block th:if="${files.size() > 0}">
                <!-- 列表表头 -->
                <div class="file-list-header">
                    <div class="col-name">文件名</div>
                    <div class="col-size">大小</div>
                    <div class="col-date">删除时间</div>
                    <div class="col-actions">操作</div>
                </div>

                <!-- 文件列表项 -->
                <th:block th:each="file : ${files}">
                    <div class="file-item" th:attr="data-id=${file.id}, data-key=${file.deletedKey}">
                        <div class="file-icon-name">
                            <i class="file-icon file bi bi-file-earmark-fill"></i>
                            <div>
                                <span class="file-name" th:text="${file.fileName}"></span>
                                <div class="expire-info">
                                    <span>剩余 </span>
                                    <span th:text="${#temporals.format(file.expireTime, 'yyyy-MM-dd HH:mm')}"></span>
                                    <span> 过期</span>
                                </div>
                            </div>
                        </div>
                        <div class="file-size">
                            <span th:if="${file.fileSize != null}" th:text="${file.fileSize}"></span>
                            <span th:if="${file.fileSize == null}">0 B</span>
                        </div>
                        <div class="file-date" th:text="${#temporals.format(file.deletedTime, 'yyyy-MM-dd HH:mm')}"></div>
                        <div class="file-actions">
                            <button class="action-btn restore-btn" title="恢复">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </button>
                            <button class="action-btn delete delete-btn-permanent" title="永久删除">
                                <i class="bi bi-trash-fill"></i>
                            </button>
                        </div>
                    </div>
                </th:block>
            </th:block>
        </div>
    </div>
</div>

<!-- 加载动画 -->
<div class="loading-spinner" id="loadingSpinner">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // 加载用户信息
    document.addEventListener('DOMContentLoaded', function() {
        loadUserInfo();
        
        // 事件委托
        const fileListContainer = document.querySelector('.file-list-container');
        if (fileListContainer) {
            fileListContainer.addEventListener('click', function(e) {
                const fileItem = e.target.closest('.file-item');
                if (!fileItem) return;
                
                const fileId = fileItem.dataset.id;
                
                // 恢复文件
                if (e.target.closest('.restore-btn')) {
                    restoreFile(fileId);
                    return;
                }
                
                // 永久删除
                if (e.target.closest('.delete-btn-permanent')) {
                    deletePermanently(fileId);
                    return;
                }
            });
        }
    });
    
    // 恢复文件
    async function restoreFile(fileId) {
        if (!confirm('确定要恢复此文件吗？')) return;
        
        showLoading();
        try {
            const response = await fetch(`/recycle/restore/${fileId}`, {
                method: 'POST'
            });
            const result = await response.json();
            hideLoading();
            
            if (result.success) {
                showAlert(result.message, 'success');
                
                // 刷新存储空间信息
                await loadUserInfo();
                
                setTimeout(() => location.reload(), 1000);
            } else {
                showAlert(result.message, 'danger');
            }
        } catch (error) {
            hideLoading();
            showAlert('恢复失败', 'danger');
        }
    }
    
    // 永久删除
    async function deletePermanently(fileId) {
        if (!confirm('确定要永久删除此文件吗？此操作不可恢复！')) return;
        
        showLoading();
        try {
            const response = await fetch(`/recycle/delete/${fileId}`, {
                method: 'DELETE'
            });
            const result = await response.json();
            hideLoading();
            
            if (result.success) {
                showAlert(result.message, 'success');
                
                // 刷新存储空间信息
                await loadUserInfo();
                
                setTimeout(() => location.reload(), 1000);
            } else {
                showAlert(result.message, 'danger');
            }
        } catch (error) {
            hideLoading();
            showAlert('删除失败', 'danger');
        }
    }
    
    // 清空回收站
    async function emptyRecycleBin() {
        if (!confirm('确定要清空回收站吗？此操作将永久删除所有文件！')) return;
        
        showLoading();
        try {
            const response = await fetch('/recycle/empty', {
                method: 'DELETE'
            });
            const result = await response.json();
            hideLoading();
            
            if (result.success) {
                showAlert(result.message, 'success');
                
                // 刷新存储空间信息
                await loadUserInfo();
                
                setTimeout(() => location.reload(), 1000);
            } else {
                showAlert(result.message, 'danger');
            }
        } catch (error) {
            hideLoading();
            showAlert('清空失败', 'danger');
        }
    }
    
    // 加载用户信息
    async function loadUserInfo() {
        try {
            const response = await fetch('/user/info');
            const result = await response.json();
            
            if (result.success && result.data) {
                updateStorageDisplay(result.data);
            }
        } catch (error) {
            console.error('加载用户信息失败', error);
        }
    }
    
    // 刷新存储空间统计
    async function refreshStorage() {
        const storageInfoEl = document.getElementById('storageInfo');
        const originalHTML = storageInfoEl.innerHTML;
        
        // 显示刷新中状态
        storageInfoEl.innerHTML = `
            <i class="bi bi-arrow-clockwise me-1"></i>
            <span>刷新中...</span>
        `;
        
        try {
            const response = await fetch('/user/refresh-storage', {
                method: 'POST'
            });
            const result = await response.json();
            
            if (result.success && result.data) {
                updateStorageDisplay(result.data);
                showAlert('存储空间已刷新', 'success');
            } else {
                storageInfoEl.innerHTML = originalHTML;
                showAlert('刷新失败', 'warning');
            }
        } catch (error) {
            storageInfoEl.innerHTML = originalHTML;
            console.error('刷新存储空间失败', error);
        }
    }
    
    // 更新存储空间显示
    function updateStorageDisplay(userInfo) {
        const storageInfoEl = document.getElementById('storageInfo');
        if (storageInfoEl) {
            storageInfoEl.innerHTML = `
                <i class="bi bi-hdd-fill me-1"></i>
                <span title="${userInfo.storageUsedFormatted} / ${userInfo.storageLimitFormatted}">
                    存储空间：${userInfo.storageUsagePercent}% (${userInfo.storageUsedFormatted})
                </span>
            `;
        }
    }
    
    // 显示用户菜单
    function showUserMenu() {
        if (confirm('确定要退出登录吗？')) {
            window.location.href = '/user/logout';
        }
    }
    
    // 显示加载动画
    function showLoading() {
        document.getElementById('loadingSpinner').style.display = 'flex';
    }
    
    // 隐藏加载动画
    function hideLoading() {
        document.getElementById('loadingSpinner').style.display = 'none';
    }
    
    // 显示提示消息
    function showAlert(message, type) {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
        alertDiv.style.cssText = 'top: 80px; right: 24px; z-index: 10000; min-width: 320px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px; border: none;';
        
        let icon = '';
        if (type === 'success') icon = '<i class="bi bi-check-circle-fill me-2"></i>';
        else if (type === 'danger') icon = '<i class="bi bi-exclamation-circle-fill me-2"></i>';
        else if (type === 'warning') icon = '<i class="bi bi-exclamation-triangle-fill me-2"></i>';
        else if (type === 'info') icon = '<i class="bi bi-info-circle-fill me-2"></i>';
        
        alertDiv.innerHTML = `
            ${icon}${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        document.body.appendChild(alertDiv);

        setTimeout(() => {
            alertDiv.remove();
        }, 3000);
    }
</script>

<!-- 复用主页面的样式 -->
<style>
    /* 从index.html复制必要的样式 */
    :root {
        --primary-color: #2979ff;
        --primary-hover: #1e6fff;
        --primary-light: #e3f2fd;
        --sidebar-width: 220px;
        --header-height: 60px;
        --text-primary: #333333;
        --text-secondary: #666666;
        --border-color: #e8e8e8;
        --bg-gray: #f7f8fa;
        --mars-red: #ff6b35;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        background: #f0f2f5;
        min-height: 100vh;
        overflow-x: hidden;
    }

    /* 顶部导航栏 */
    .top-navbar {
        background: linear-gradient(135deg, #2979ff 0%, #1e6fff 100%);
        height: var(--header-height);
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    .logo-section {
        display: flex;
        align-items: center;
        color: white;
        font-size: 20px;
        font-weight: 600;
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--mars-red) 0%, #ff8a5b 100%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        font-size: 20px;
    }

    .user-section {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .storage-info {
        color: white;
        font-size: 13px;
        background: rgba(255, 255, 255, 0.15);
        padding: 6px 14px;
        border-radius: 20px;
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        font-size: 18px;
        cursor: pointer;
    }

    /* 主容器 */
    .main-wrapper {
        display: flex;
        margin-top: var(--header-height);
        min-height: calc(100vh - var(--header-height));
    }

    /* 左侧边栏 */
    .sidebar {
        width: var(--sidebar-width);
        background: white;
        border-right: 1px solid var(--border-color);
        padding: 20px 0;
        position: fixed;
        left: 0;
        top: var(--header-height);
        bottom: 0;
        overflow-y: auto;
    }

    .sidebar-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .sidebar-item {
        padding: 12px 24px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        color: var(--text-primary);
        font-size: 14px;
        border-left: 3px solid transparent;
    }

    .sidebar-item i {
        margin-right: 12px;
        font-size: 18px;
        width: 20px;
    }

    .sidebar-item:hover {
        background: var(--bg-gray);
    }

    .sidebar-item.active {
        background: var(--primary-light);
        color: var(--primary-color);
        border-left-color: var(--primary-color);
    }

    /* 主内容区 */
    .main-content {
        margin-left: var(--sidebar-width);
        flex: 1;
        background: white;
        min-height: calc(100vh - var(--header-height));
    }

    /* 面包屑导航 */
    .breadcrumb-bar {
        padding: 16px 24px;
        background: white;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
    }

    .breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
        font-size: 14px;
    }

    .breadcrumb-item {
        color: var(--text-secondary);
    }

    .breadcrumb-item a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s;
    }

    .breadcrumb-item a:hover {
        color: var(--primary-color);
    }

    .breadcrumb-item.active {
        color: var(--text-primary);
    }

    .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
        color: #ccc;
    }

    /* 工具栏 */
    .toolbar {
        padding: 16px 24px;
        background: white;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .toolbar-left {
        display: flex;
        gap: 12px;
    }

    .toolbar-right {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .btn-toolbar {
        padding: 8px 16px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background: white;
        color: var(--text-primary);
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .btn-toolbar:hover {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .btn-toolbar.btn-danger {
        background: #dc3545;
        color: white;
        border-color: #dc3545;
    }

    .btn-toolbar.btn-danger:hover {
        background: #c82333;
        border-color: #c82333;
    }

    /* 文件列表 */
    .file-list-container {
        padding: 0;
    }

    .file-list-header {
        display: flex;
        padding: 12px 24px;
        background: var(--bg-gray);
        border-bottom: 1px solid var(--border-color);
        font-size: 13px;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .file-list-header > div {
        padding: 0 8px;
    }

    .col-name {
        flex: 1;
        min-width: 300px;
    }

    .col-size {
        width: 120px;
    }

    .col-date {
        width: 180px;
    }

    .col-actions {
        width: 140px;
        text-align: right;
    }

    .file-item {
        display: flex;
        align-items: center;
        padding: 12px 24px;
        border-bottom: 1px solid #f5f5f5;
        transition: all 0.2s;
    }

    .file-item:hover {
        background: #fafafa;
    }

    .file-item > div {
        padding: 0 8px;
    }

    .file-icon-name {
        flex: 1;
        min-width: 300px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .file-icon {
        font-size: 24px;
        width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .file-icon.file {
        color: #78909c;
    }

    .file-name {
        color: var(--text-primary);
        font-size: 14px;
    }

    .file-size {
        width: 120px;
        color: var(--text-secondary);
        font-size: 13px;
    }

    .file-date {
        width: 180px;
        color: var(--text-secondary);
        font-size: 13px;
    }

    .file-actions {
        width: 140px;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .file-item:hover .file-actions {
        opacity: 1;
    }

    .action-btn {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.2s;
        font-size: 14px;
    }

    .action-btn:hover {
        background: var(--primary-light);
        color: var(--primary-color);
    }

    .action-btn.delete:hover {
        background: #ffebee;
        color: #f44336;
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 80px 20px;
        color: var(--text-secondary);
    }

    .empty-state i {
        font-size: 80px;
        color: #ddd;
        margin-bottom: 20px;
    }

    .empty-state h4 {
        font-size: 16px;
        color: var(--text-primary);
        margin-bottom: 8px;
    }

    .empty-state p {
        font-size: 14px;
        color: var(--text-secondary);
    }

    /* 加载动画 */
    .loading-spinner {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9999;
        align-items: center;
        justify-content: center;
    }

    .spinner-border {
        width: 48px;
        height: 48px;
        border-width: 4px;
    }
</style>

</body>
</html>

